<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/css/layout.css" type="text/css"/>
</head>
<body>
<h1>Web Design</h1>
<p>These are the things you should know.</p>
<ol id="linklist">
    <!--
网易红彩
网易薄荷
公开课
网易严选-->
    <li>
        <a >网易红彩</a>
    </li>
    <li>
        <a >网易薄荷</a>
    </li>
    <li>
        <a>公开课</a>
    </li>
    <li>
        <a>网易严选</a>
    </li>
</ol>
<div id="slideshow">
    <img src="/images/piclist.png" id="preview">
</div>
<script>
    addLoadEvent(prepareSlideshow())

    function prepareSlideshow() {
        var preview = document.getElementById("preview");
        preview.style.position = "absolute";
        var list = document.getElementById("linklist");
        var links = list.getElementsByTagName("a");
        var ms = 20
        if (links.length !== 0) {
            links[0].onmouseover = function () {
                moveMsg('preview', 0, 0, ms);
            }
            links[1].onmouseover = function () {
                moveMsg('preview', -111, 0, ms);
            }
            links[2].onmouseover = function () {
                moveMsg('preview', -222, 0, ms);
            }
            links[3].onmouseover = function () {
                moveMsg('preview', -333, 0, ms);
            }
        }
    }

    function moveMsg(elemId, final_x, final_y, ms) {
        var p1 = document.getElementById(elemId);
        if (p1.movement) {
            clearTimeout(p1.movement)
        }
        if(!p1.style.left){
            p1.style.left="0px"
        }
        if(!p1.style.top){
            p1.style.top ="0px"
        }
        var dist = 0
        var xpos = parseInt(p1.style.left);
        var ypos = parseInt(p1.style.top);
        var step = 3
        if (xpos === final_x && ypos === final_y) {
            return;
        }
        if (xpos < final_x) {
            dist = Math.ceil((final_x - xpos) / step)
            xpos = xpos + dist;
        }
        if (xpos > final_x) {
            dist = Math.ceil((xpos - final_x) / step)
            xpos = xpos - dist;
        }
        if (ypos < final_y) {
            dist = Math.ceil((final_y - ypos) / step)
            ypos = ypos + dist;
        }
        if (ypos > final_y) {
            dist = Math.ceil((ypos - final_y) / step)
            ypos = ypos - dist;
        }
        p1.style.left = xpos + 'px';
        p1.style.top = ypos + 'px';
        p1.movement = setTimeout("moveMsg('" + elemId + "'," + final_x + "," + final_y + "," + ms + ")", ms);
        return true;
    }

    /**
     * 添加onload事件
     * @param func
     */
    function addLoadEvent(func) {
        var oldload = window.onload;
        if (typeof oldload != 'function') {
            window.onload = func;
        } else {
            window.onload = function () {
                oldload();
                func();
            }
        }
    }
</script>
</body>
</html>